<!--
 * @Author: ChaiHongJun
 * @Date: 2021-03-23 13:46:24
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-04-28 11:51:39
 * @version: 
 * @Description: Banner
-->
<template>
  <div class="banner" v-loading="loadingBanner">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="banner in getBanner" :key="banner.imageUrl">
        <img :src="banner.imageUrl" :alt="banner.typeTitle" />
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { mapGetters } from "vuex";
export default {
  name: "Banner",
  data() {
    return {
      loadingBanner: false,
      swiperOption: {
        // 参数选项,显示小点
        pagination: ".swiper-pagination",
        grabCursor: true,
        slidesPerView: 3,
        spaceBetween: 20,
        //循环
        loop: true,
        //每张播放时长3秒，自动播放
        autoplay: 2000,
        //滑动速度
        speed: 1000,
        // delay:1000
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
  computed: {
    ...mapGetters(["getBanner"]),
  },
  mounted() {
    this.loadingBanner = true;
    this.$store.dispatch("getBanner");
    this.loadingBanner = false;
  },
};
</script>
<style lang="stylus" scoped>
.banner >>> .swiper-pagination {
  width: 100%;
  bottom: -20px;

  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #a3a3ac;
    opacity: 0.8;
    border-radius: 50%;
    margin: 0 5px;

    &.swiper-pagination-bullet-active {
      opacity: 1;
      width: 15px;
      border-radius: 4px;
      background: $color-theme;
    }
  }
}

.banner {
  position: relative;

  img {
    border-radius: 3px;
  }
}
</style>